import {
  Button,
  Col,
  DatePicker,
  Form,
  Input,
  message,
  Modal,
  Select,
  TimePicker,
} from 'antd'
import { useState } from 'react'
import 'dayjs/locale/zh-cn'
import { useDispatch, useSelector } from 'react-redux'
import { addEmp, getList } from '@/store/actions/Employees'
// import dayjs from 'dayjs'
const AddEmployee = ({ open, setOpen }) => {
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [form] = Form.useForm()
  const dispatch = useDispatch()
  const currentInfo = useSelector((state) => state.Employees)

  const handleOk = async () => {
    try {
      const data = await form.validateFields()
      setConfirmLoading(true)
      data.correctionTime = data.correctionTime.format('YYYY-MM-DD')
      data.timeOfEntry = data.timeOfEntry.format('YYYY-MM-DD')
      await dispatch(addEmp(data))
      await dispatch(
        getList({ page: currentInfo.current, size: currentInfo.pageSize })
      )
      setConfirmLoading(false)
      setOpen(false)
      message.success('操作成功')
    } catch (e) {
      setConfirmLoading(false)
    }

    // setConfirmLoading(true)
    // setTimeout(() => {
    //   setOpen(false)
    //   setConfirmLoading(false)
    // }, 2000)
  }
  const handleCancel = () => {
    console.log('Clicked cancel button')
    setOpen(false)
  }
  return (
    <>
      <Modal
        title="新增员工"
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        destroyOnClose
      >
        <Form
          name="basic"
          labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}
          autoComplete="off"
          form={form}
          preserve={false}
        >
          <Form.Item
            label="姓名"
            name="username"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="手机"
            name="mobile"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="入职日期"
            name="timeOfEntry"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <DatePicker style={{ width: 314.66 }} />
          </Form.Item>

          <Form.Item
            label="聘用形式"
            name="formOfEmployment"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Select
              placeholder="请选择"
              options={[
                {
                  value: '1',
                  label: '正式',
                },
                {
                  value: '2',
                  label: '非正式',
                },
              ]}
            />
          </Form.Item>
          <Form.Item
            label="工号"
            name="workNumber"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="部门"
            name="departmentName"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="转正日期"
            name="correctionTime"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <DatePicker style={{ width: 314.66 }} />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}
export default AddEmployee
